<template>
    <div class="lwy-accountbook">
        <div class="account" v-for="v in account" @click="paths(v.path)">
            <p class="account-name">{{ v.name }}</p>
            <img :src=v.img alt="">
            <p>{{ v.income }}{{ v.amount1 }}</p>
            <p>{{ v.expen }} {{ v.amount }}</p>
        </div>
        <RouterView></RouterView>

    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            account: [
                { name: '家庭账本', img: require('../assets/image/lwy/mange.png'), income: '收入:', amount1: 0, amount: 0, expen: '开支:', path: '/happyhome/live/family' },
                { name: '个人账本', img: require('../assets/image/lwy/person.jpg'), amount: 0, expen: '开支:', path: '/happyhome/live/person' },
                { name: '存款', img: require('../assets/image/lwy/manag.png'), amount1: 0, income: '总金额:', path: '/happyhome/live/deposit' }
            ]
        }
    },
    methods: {
        paths(path) {
            this.$router.push(path)
        }
    },
    mounted() {
        // 家庭账本
        axios({
            url: '/dbdata/family-account'
        }).then(({ data }) => {
            let month;
            if ((new Date().getMonth() + 1) < 10) {
                month = '0' + (new Date().getMonth() + 1)
            } else if ((new Date().getMonth() + 1) >= 10) {
                month = new Date().getMonth() + 1
            }
            let sum = 0
            for (let i = 0; i < data.length; i++) {
                if (data[i].time.split('T')[0].split('-')[1] == month) {
                    let a = data[i].time.split('T')
                    const regex = /\d+/g;
                    const numbers = data[i].price.match(regex)
                    if (numbers) {
                        for (let j = 0; j < numbers.length; j++) {
                            sum += parseFloat(numbers[j]);
                        }
                    }
                }
            }
            this.account[0].amount = sum;
            sessionStorage.setItem('amountl1', Number(sum))
        })
        // 收入
        axios({
            url: '/dbdata/income1'
        }).then(({ data }) => {
            let sum = 0
            for (let i = 0; i < data.length; i++) {
                sum += parseFloat(data[i].money)
            }
            this.account[0].amount1 = sum;
        })
        // 个人账本
        axios({
            url: '/dbdata/person-account'
        }).then(({ data }) => {
            let month;
            if ((new Date().getMonth() + 1) < 10) {
                month = '0' + (new Date().getMonth() + 1)
            } else if ((new Date().getMonth() + 1) >= 10) {
                month = new Date().getMonth() + 1
            }
            let sum = 0
            for (let i = 0; i < data.length; i++) {
                if (data[i].time.split('T')[0].split('-')[1] == month) {
                    let a = data[i].time.split('T')
                    const regex = /\d+/g;
                    const numbers = data[i].price.match(regex)
                    if (numbers) {
                        for (let j = 0; j < numbers.length; j++) {
                            sum += parseFloat(numbers[j]);
                        }
                    }
                }
            }
            this.account[1].amount = sum;
        })
        // 存款
        axios({
            url: '/dbdata/deposit'
        }).then(({ data }) => {
            let sum = 0
            for (let i = 0; i < data.length; i++) {
                sum += parseFloat(data[i].deposit)
            }
            this.account[2].amount1 = sum;
        })
    }
}
</script>
<style scoped lang="less">
.lwy-accountbook {
    .account {
        height: 400px;
        width: 270px;
        margin-top: 100px;
        border-radius: 2em;
        border: 0.5px solid rgba(00, 00, 00, 0.2);
        margin-left: 100px;
        float: left;

        &:hover {
            box-shadow: 0px 0px 6px #9a9595;
        }

        .account-name {
            font-size: 20px;
            margin-top: 10px;
            margin-left: 0px;
            font-weight: bolder;
        }

        img {
            height: 150px;
            width: 200px;
            margin-top: 20px;
        }

        P {
            margin-top: 40px;
            margin-left: -80px;
        }
    }
}
</style>
